<!DOCTYPE html>
<html>


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="Report.css">
    <script type="text/javascript" src="../../js/jquery-3.2.1.js"></script>

</head>

<body>

<div id='pop-div' class="pop-box">
    <div class="pop_evidence">
        <div><span>举报证据：</span></div>
        <input type="file" id="changeimg" onchange="fileReader(this)" style="display: none"/>
        <div>
            <img id="img" src="../../img/jia.png" />
        </div>
    </div>
    <div class="pop_object">
        <div><span>举报对象:</span></div>
        <label><input name="report" checked type="radio" />该作者</label>
        <label><input name="report" type="radio"/>该内容</label>
    </div>
    <div class="report_class">
        <div><span>举报类型:</span></div>
        <div class="report_types">
            <div><label><input name="report_type" checked type="radio" />色情低俗</label></div>
            <div> <label><input name="report_type" type="radio"/>政治敏感</label></div>
            <div> <label><input name="report_type" type="radio" />违法暴力</label></div>
            <div> <label><input name="report_type" type="radio"/>欺诈骗钱</label></div>
            <div> <label><input name="report_type" type="radio" />广告其他</label></div>
            <div>
                <label><input name="report_type" type="radio"/>非法售卖野生物及制品</label>
            </div>
            <div><label><input name="report_type" type="radio" />暴恐血腥</label></div>
            <div><label><input name="report_type" type="radio"/>侵犯公民个人信息</label></div>
            <div> <label><input name="report_type" type="radio" />诱导自杀自残</label></div>
            <div> <label><input name="report_type" type="radio"/>侵犯未成年人权益</label></div>
        </div>
    </div>
    <div class="pop_contents">
        <div class="report_that"><span>举报说明:</span></div>
        <div><textarea class="pop_content"></textarea></div>
    </div>
    <div id='buttonPanel' >
        <button id="button_submit" type="submit">提交</button>
        <button type="button" id="button_close" onclick="hideDiv('pop-div');" >关闭</button>
    </div>
</div>

<input type="button" value="我要举报" onclick="popupDiv('pop-div')"
       style="cursor: pointer;">
</body>

<script type="text/javascript">

    function popupDiv(div_id) {
        // 获取传入的DIV
        var $div_obj = $("#" + div_id);
        // 计算机屏幕高度
        var windowWidth = $(window).width();
        // 计算机屏幕长度
        var windowHeight = $(window).height();
        // 取得传入DIV的高度
        var popupHeight = $div_obj.height();
        // 取得传入DIV的长度
        var popupWidth = $div_obj.width();

        // // 添加并显示遮罩层
        $("<div id='shadow'></div>").width(windowWidth * 0.99)
            .height(windowHeight * 0.99).click(function() {
            //hideDiv(div_id);
        }).appendTo("body").fadeIn(200);

        // 显示弹出的DIV
        $div_obj.css({
            "position" : "absloute"
        }).animate({
            left : windowWidth / 2 - popupWidth / 2,
            top : windowHeight / 2 - popupHeight / 2,
            opacity : "show"
        }, "slow");

    }
    /*隐藏弹出DIV*/
    function hideDiv(div_id) {
        $("#shadow").remove();
        $("#" + div_id).animate({
            left : 0,
            top : 0,
            opacity : "hide"
        }, "slow");
    }
    $("#img").click(function () {
        $("#changeimg").trigger('click');
    });
    function fileReader(obj){
        var file = obj.files;
        var img = document.getElementById("img");
        var reader = new FileReader();// 操作图片
        if(/image/.test(file[0].type)){
            reader.readAsDataURL(file[0]);
        }else {
            $("#img").attr("src","img/jia.png");
            alert('请选择图片!');
            obj.value = "";
            return;
        }
        // 图片加载错误
        reader.onerror = function(){
            document.write("图片加载错误");
        }
        // 图片加载完成
        reader.onload = function(){
            img.src = reader.result;
        }
    }
</script>
</html>